import React, { Component } from 'react'
import "../assets/styles/content.css"
import TabA from './TabA'
import TabB from './TabB'
import TabC from './TabC'
import TabD from "./TabD"
import TabE from "./TabE"

class Content extends Component {
  state = {
    isActive:"TabA"
  }
  menuCheckedEvent = (event)=>{
    const element = event.target
    console.log(element);
    if(element.nodeName=="LI"){
      const attrName = element.getAttribute("name");
      this.setState({
        isActive:attrName
      })
    }
  }
  get realComp(){
    const {isActive} = this.state
    switch(isActive){
      case "TabA":return <TabA></TabA>
      case "TabB":return <TabB></TabB>
      case "TabC":return <TabC></TabC>
      case "TabD":return <TabD></TabD>
      case "TabE":return <TabE></TabE>
    }
  }
  render() {
    const {isActive} = this.state
    return (
      <div className='content'>
        <div className='menu'>
          <ul onClick={this.menuCheckedEvent}>
            <li name="TabA" id='tab1' className={isActive=="TabA"?"active":""}>优惠券</li>
            <li name="TabB" id='tab2' className={isActive=="TabB"?"active":""}>团购</li>
            <li name="TabC" id='tab3' className={isActive=="TabC"?"active":""}>订单</li>
            <li name="TabD" id='tab4' className={isActive=="TabD"?"active":""}>todo</li>
            <li name="TabE" id='tab5' className={isActive=="TabE"?"active":""}>购物车</li>
          </ul>
        </div>
        <div className='dataSource'>
          {/* 渲染组件位置 */}
          {this.realComp}
        </div>
      </div>
    )
  }
}

export default Content
